(function(){

    var box=document.getElementById('box');
    var _name=document.getElementById('name');
    var message=document.getElementById('message');
    var btn=document.getElementById('btn');

    render();
    btn.onclick=function(){
        if(_name.value==''||message.value=='')
        {
            alert('信息不能为空');
            return;
        }
        var key=_name.value;
        var keyvalue=message.value;
        localStorage.setItem(key,keyvalue);
        render();
        _name.value='';
        message.value='';
    }

    box.onclick=function(event){
        var e=event||window.event;
        var target=e.target||e.srcElement;
        if(target.nodeName.toUpperCase()=='SPAN')
        {
            target.outerHTML='<input type="text" value="'+target.innerHTML+'"><button class="edit">确认修改</button><button class="del">确认删除</button>'
        }
        if(target.className=='edit')
        {
            var key=target.parentNode.previousSibling.innerHTML;
            var keyvalue=target.previousSibling.value;
            localStorage.setItem(key,keyvalue);
            render();
        }
        if(target.className=='del')
        {
            var key=target.parentNode.previousSibling.innerHTML;
            localStorage.removeItem(key);
            render();
        }
    }

    function render(){
        var html='';
        var obj=localStorage;
        if(obj=='')
        {
            html='请输入您的留言信息';
        }else{
            for(var i in obj)
            {
                html+='<li><p>'+i+'</p><div><span id="span">'+obj[i]+'</span></div></li>';
            }
        }
        box.innerHTML=html;
    }

}());
